import { modal } from 'vue-strap'
import { getBuyTypeList, getInvesterBuyTypeList, addInvesterBuyType, deleteInvesterBuyType, swapInvesterBuyType, showMsg } from '../../../../../vuex/action.js'

export default {
  name: 'UpdateInvesterBuyType',
  data() {
    return {
      showUpdateBuyTypeModal: false,
      showAddBuyTypeModal: false,
      buytypeList: [],
      investerBuytypeList: []
    }
  },
  props: {
    id: {
      type: Number,
      required: true
    },
    subtype: {
      type: Number,
      default: 0
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    isShowBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    noSelectedBuytypeList() {
      return this.buytypeList.filter((item) => {
        let isSelected = false
        this.investerBuytypeList.forEach((buytype) => {
          if (item.title === buytype.title) {
            isSelected = true
          }
        })
        if (!isSelected) {
          return item
        }
      })
    },
    setIds() {
      let setIds = []
      this.noSelectedBuytypeList.map((item) => {
        if (item.isSelected) {
          setIds.push(item.id)
        }
      })
      return setIds
    }
  },
  methods: {
    closeBuyTypeModal() {
      this.showUpdateBuyTypeModal = false
    },
    validCheck() {
      if (this.setIds.length === 0) {
        this.xShowMsg({
          type: 'danger',
          content: '请选择套餐类型'
        })
        return false
      }
      return true
    },
    moveUp(index) {
      let fromRefId = this.investerBuytypeList[index].refId
      let toRefId = this.investerBuytypeList[index - 1].refId
      this.swapInvesterBuyType(fromRefId, toRefId)
    },
    moveDown() {
      let fromRefId = this.investerBuytypeList[index].refId
      let toRefId = this.investerBuytypeList[index + 1].refId
      this.swapInvesterBuyType(fromRefId, toRefId)
    },
    swapInvesterBuyType(fromRefId, toRefId) {
      this.xSwapInvesterBuyType({refId1: fromRefId, refId2: toRefId}).then((res) => {
        this.showUpdateDialog()
      })
    },
    showAddDialog() {
      this.xGetBuyTypeList().then((res) => {
        this.buytypeList = res.data.list.map((item) => {
          item.isSelected = false
          return item
        })
        this.showUpdateBuyTypeModal = false
        this.showAddBuyTypeModal = true
      }).catch((res) => {
        this.xShowMsg({
          type: 'danger',
          content: res.error_msg
        })
      })
    },
    selectBuyType(item) {
      item.isSelected = !item.isSelected
    },
    evtAddBuytype() {
      let valid = this.validCheck()
      if (!valid) {
        return
      }

      this.setIds.forEach((setId) => {
        this.addBuytype(setId)
      })
    },
    addBuytype(setId) {
      this.xAddInvesterBuyType({
        id: this.id,
        setId: setId,
        subType: this.subtype
      }).then((res) => {
        this.showAddBuyTypeModal = false
        this.$dispatch('on_refresh_list')
      }).catch((res) => {
        this.xShowMsg({
          type: 'danger',
          content: res.error_msg
        })
      })
    },
    deleteBuyType(item) {
      this.xDeleteInvesterBuyType({
        refId: item.refId,
        subType: this.subtype
      }).then((res) => {
        this.showUpdateDialog()
      }).catch((res) => {
        this.xShowMsg({
          type: 'danger',
          content: res.error_msg
        })
      })
    },
    showUpdateDialog() {
      this.xGetInvesterBuyTypeList({
        id: this.id,
        subType: this.subtype
      }).then((res) => {
        this.investerBuytypeList = res.data.list
        this.showUpdateBuyTypeModal = true
      }).catch((res) => {
        this.xShowMsg({
          type: 'danger',
          content: res.error_msg
        })
      })
    }
  },
  vuex: {
    actions: {
      xShowMsg: showMsg,
      xGetInvesterBuyTypeList: getInvesterBuyTypeList,
      xGetBuyTypeList: getBuyTypeList,
      xAddInvesterBuyType: addInvesterBuyType,
      xDeleteInvesterBuyType: deleteInvesterBuyType,
      xSwapInvesterBuyType: swapInvesterBuyType
    }
  },
  components: {
    'modal': modal
  }
}
